<template>
  <div class="dept-detail-container">
    <!-- 主体内容 -->
    <main class="content-wrapper">
      <!-- 返回按钮 -->
      <div class="back-button">
        <router-link to="/adminDept">← 返回行政机构页</router-link>
      </div>
      
      <!-- 部门详情内容 -->
      <div class="dept-detail-content">
        <div class="dept-detail-header">
          <h1>{{ departmentInfo.name }}</h1>
        </div>
        
        <div class="dept-detail-body">
          <div class="dept-detail-description">
            <h2>部门职责</h2>
            <p>{{ departmentInfo.description }}</p>
          </div>
          
          <div class="dept-detail-organization">
            <h2>部门架构</h2>
            <div class="org-chart">
              <div class="org-node top-node">
                <div class="node-title">{{ departmentInfo.name }}</div>
              </div>
              <div class="org-connections">
                <div class="org-node middle-node">
                  <div class="node-title">部门负责人</div>
                </div>
                <div class="org-node middle-node">
                  <div class="node-title">科室负责人</div>
                </div>
                <div class="org-node middle-node">
                  <div class="node-title">工作人员</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="dept-detail-contact">
            <h2>联系方式</h2>
            <div class="contact-info">
              <div class="contact-item">
                <span class="contact-label">办公地点：</span>
                <span class="contact-value">行政楼{{ Math.floor(Math.random() * 5) + 1 }}层</span>
              </div>
              <div class="contact-item">
                <span class="contact-label">联系电话：</span>
                <span class="contact-value">010-123456{{ Math.floor(Math.random() * 100) }}</span>
              </div>
              <div class="contact-item">
                <span class="contact-label">电子邮箱：</span>
                <span class="contact-value">{{ formatEmail(departmentInfo.name) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import Navbar from '../../components/Navbar.vue';
import Footer from '../../components/Footer.vue';

const route = useRoute();
const departmentInfo = ref({
  name: '未知部门',
  description: '暂无部门描述信息'
});

// 格式化邮箱地址
const formatEmail = (deptName) => {
  // 简单的邮箱格式化，实际应用中可能需要更复杂的处理
  const emailPrefix = deptName
    .replace(/[（）\s\/]/g, '') // 移除非字母数字字符
    .toLowerCase()
    .substring(0, 20); // 限制长度
  return `${emailPrefix}@shanhedaxue.edu.cn`;
};

// 组件挂载时获取部门信息
onMounted(() => {
  if (route.query.name) {
    departmentInfo.value.name = decodeURIComponent(route.query.name);
  }
  if (route.query.description) {
    departmentInfo.value.description = decodeURIComponent(route.query.description);
  }
});
</script>

<style scoped>
/* 主容器样式 */
.dept-detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-wrapper {
  flex: 1;
  padding: 40px 20px;
}

/* 返回按钮样式 */
.back-button {
  margin-bottom: 30px;
}

.back-button a {
  color: #1a5e95;
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

.back-button a:hover {
  color: #0d3b66;
  text-decoration: underline;
}

/* 部门详情内容样式 */
.dept-detail-content {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 部门详情头部样式 */
.dept-detail-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e0e6ed;
}

.dept-detail-header h1 {
  font-size: 32px;
  color: #2c3e50;
  font-weight: 700;
}

/* 部门详情主体样式 */
.dept-detail-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 部门描述样式 */
.dept-detail-description h2,
.dept-detail-organization h2,
.dept-detail-contact h2 {
  font-size: 24px;
  color: #1a5e95;
  margin-bottom: 20px;
  font-weight: 600;
}

.dept-detail-description p {
  font-size: 16px;
  line-height: 1.8;
  color: #34495e;
  text-align: justify;
}

/* 部门架构样式 */
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin: 30px 0;
}

.org-node {
  padding: 15px 30px;
  background-color: #f8f9fa;
  border: 2px solid #1a5e95;
  border-radius: 8px;
  text-align: center;
  min-width: 200px;
  transition: transform 0.3s ease;
}

.org-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(26, 94, 149, 0.2);
}

.node-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.org-connections {
  display: flex;
  gap: 20px;
  position: relative;
}

.org-connections::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background-color: #1a5e95;
}

.org-connections::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1a5e95;
}

/* 联系方式样式 */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-label {
  font-weight: 600;
  color: #2c3e50;
  min-width: 100px;
}

.contact-value {
  color: #7f8c8d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 70px 15px 30px;
  }
  
  .dept-detail-content {
    padding: 20px 15px;
  }
  
  .dept-detail-header h1 {
    font-size: 26px;
  }
  
  .dept-detail-description h2,
  .dept-detail-organization h2,
  .dept-detail-contact h2 {
    font-size: 20px;
  }
  
  .dept-detail-description p {
    font-size: 14px;
  }
  
  .org-connections {
    flex-direction: column;
    gap: 15px;
  }
  
  .org-connections::before {
    display: none;
  }
  
  .org-connections::after {
    display: none;
  }
  
  .contact-item {
    flex-direction: column;
    gap: 5px;
  }
  
  .contact-label {
    min-width: auto;
  }
}
</style>